<template>
  <Tooltip
    class="tableTooltip"
    :maxWidth="tipWidth > 2 * width ? tipWidth : 2 * width"
    :placement="placement"
    :triggle="triggle"
    :transfer="true"
  >
    <p
      class="showContent"
      :class="{ 'html-ellipsis': type === 'html' ? true : false }"
      :style="{ width: width ? width + 'px' : 'auto' }"
      v-html="showContent || content"
    ></p>
    <div slot="content" class="tooltipContent" v-html="content"></div>
  </Tooltip>
</template>
<script>
export default {
  name: 'tableTooltip',
  props: {
    content: {
      default: '无'
    },
    width: {
      type: Number,
      default: 100
    },
    tipWidth: {
      type: Number,
      default: 200
    },
    placement: {
      type: String,
      default: 'top-start'
    },
    triggle: {
      type: String,
      default: 'hover'
    },
    type: {
      type: String,
      default: 'string'
    },
    showContent: {
      type: String,
      default: ''
    }
  },
  data() {
    return {};
  },
  watch: {},
  filters: {},
  computed: {},
  directives: {
    content: {
      bind: function(el, binding, vnode) {
        el.innerHTML = binding.value || '无';
        console.log(el, binding, vnode);
      }
    }
  },
  mounted() {},
  beforeDestroy() {},
  methods: {},
  destroyed() {}
};
</script>

<style scoped>
.tooltipContent {
  white-space: normal;
  word-break: break-all;
  white-space: pre-wrap;
}
/deep/.tooltipContent img {
  max-width: 100%;
}
/deep/.tooltipContent pre {
  white-space: normal;
}
/* 表格中按列的宽度，不使用传递的宽度 */
.ivu-table-cell .tableTooltip {
  display: block;
}
.ivu-table-cell .tableTooltip /deep/ .ivu-tooltip-rel {
  width: 100% !important;
}
.ivu-table-cell .tableTooltip /deep/ .showContent {
  width: auto !important;
}

.showContent {
  /*max-width:200px;*/
  word-break: normal;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/deep/.html-ellipsis,
.html-ellipsis * {
  font-size: 14px;
}
/deep/.html-ellipsis {
  display: inline-block;
}
/deep/.html-ellipsis * {
  display: inline !important;
}
/deep/.html-ellipsis img {
  max-height: 20px;
}
/deep/.html-ellipsis sup {
  top: 0;
}
/deep/.html-ellipsis sub {
  bottom: 0;
}
/deep/.html-ellipsis br {
  display: none !important;
}
@media screen and (min-width: 1701px) {
  .flex .showContent {
    max-width: 400px;
  }
}
@media screen and (min-width: 1501px) and (max-width: 1700px) {
  .flex .showContent {
    max-width: 300px;
  }
}
@media screen and (min-width: 1301px) and (max-width: 1500px) {
  .flex .showContent {
    max-width: 200px;
  }
}
@media screen and (min-width: 1200px) and (max-width: 1300px) {
  .flex .showContent {
    max-width: 150px;
  }
}
@media screen and (max-width: 1199px) {
  .flex .showContent {
    max-width: 100px;
  }
}
</style>
